<template>
  <div class="">
    <div>
      <jbstep :activeStep="activeStep" @backStep="backStep"></jbstep>
    </div>
    <div class="check-con">
      <div class="left-tree">
        <MyTree @backStep="backStep" orgType="2" :activeStep="activeStep"></MyTree>
      </div>
      <div class="right-content">
        <div class="check-info">
          <div v-if="activeStep == 0">
            <Tab000 :orgName="props.currentRow.organizationBaseName" :orgId="props.currentRow.creditCode" :examineYear="props.currentRow.examineYear" />
          </div>
          <div v-if="activeStep == 1">
            <Tab011 />
          </div>
          <div v-else-if="activeStep == 2">
            <Tab021 />
          </div>
          <div v-else-if="activeStep == 3">
            <Tab031 />
          </div>
          <div v-else-if="activeStep == 4">
            <Tab041 />
          </div>
          <div v-else-if="activeStep == 5">
            <Tab051 />
          </div>
          <div v-else-if="activeStep == 6">
            <Tab061 />
          </div>
          <div v-else-if="activeStep == 7">
            <Tab071 />
          </div>
          <div v-else-if="activeStep == 8">
            <Tab081 />
          </div>
          <div v-else-if="activeStep == 9">
            <Tab091 />
          </div>
          <div v-else-if="activeStep == 10">
            <Tab0101 />
          </div>
          <div v-else-if="activeStep == 11">
            <Tab0111 />
          </div>
          <div v-else-if="activeStep == 12">
            <Tab0121 />
          </div>
          <div v-else-if="activeStep == 13">
            <Tab0131 />
          </div>
          <div v-else-if="activeStep == 14">
            <Tab0141 />
          </div>
          <div v-else-if="activeStep == 15">
            <Tab0151 />
          </div>
          <div v-else-if="activeStep == 16">
            <Tab0161 />
          </div>
          <div v-else-if="activeStep == 17">
            <Tab0171 />
          </div>
          <div v-else-if="activeStep == 18">
            <Tab0181 />
          </div>
          <div v-else-if="activeStep == 19">
            <Tab0191 />
          </div>
          <div v-else-if="activeStep == 20">
            <Tab0201 />
          </div>
          <div v-else-if="activeStep == 21">
            <Tab0211 />
          </div>
          <div v-else-if="activeStep == 22">
            <Tab0221 />
          </div>
          <div v-else-if="activeStep == 23">
            <Tab0231 />
          </div>
          <div v-else-if="activeStep == 24">
            <Tab0241 />
          </div>
          <div v-else-if="activeStep == 25">
            <Tab0251 />
          </div>
        </div>
        <div class="note-box" v-if="activeStep != 0">
          <el-input type="textarea" v-model="textValue" style="width: 100%" :rows="5" placeholder="请输入批注" />
        </div>
      </div>
    </div>

    <div style="margin-top: 30px; text-align: center">
      <el-button  @click="changeStep('prev')">上一步</el-button>
      <el-button @click="changeStep('next')">下一步</el-button>
      <el-button type="primary" @click="saveNote()">保存批注</el-button>
      <el-button type="primary" @click="detailTip()">查看批注</el-button>
      <el-button type="primary" :loading="isLoad" @click="toSubmit()">提交</el-button>
    </div>
  </div>

  <el-dialog title="提交校对" v-model="dialogSubmitVisible" width="600px" top="4vh" append-to-body>
    <div style="height: 100px">
      <el-form ref="checkFormRef" :model="checkForm" label-width="120px" class="demo-ruleForm" status-icon>
        <el-form-item label="校对处理" prop="proofreadStatus">
          <!-- <el-radio-group v-model="checkForm.proofreadStatus">
            <el-radio :value="1">通过</el-radio>
            <el-radio :value="2">不通过</el-radio>
          </el-radio-group> -->
          <el-select v-model="checkForm.proofreadStatus" placeholder="请选择" style="width: 100%">
            <el-option label="通过" value="1" />
            <el-option label="不通过" value="2" />
          </el-select>
        </el-form-item>
      </el-form>
    </div>
    <div style="margin-top: 30px; text-align: center">
      <el-button type="plain" @click="toClose()">关闭</el-button>
      <el-button type="primary" @click="submitJdForm(checkFormRef)" :loading="saveLoad">提交审核 <i
          class="el-icon-arrow-right el-icon--right"></i></el-button>
    </div>
  </el-dialog>
</template>

<script setup lang="ts">
import { ref, reactive, nextTick, provide, inject } from 'vue'
import APTMethods from '@/api/yearCheck/mfOrg'
import jbstep from './step.vue'

import MyTree from '../../../components/myTree.vue'
import Tab000 from './checkItem/tab000.vue' //
import Tab011 from './checkItem/tab011.vue' //基础信息
import Tab021 from './checkItem/tab021.vue' //从业人员情况信息
//内部建设
import Tab031 from './checkItem/tab031.vue' //负责人信息
import Tab041 from './checkItem/tab041.vue' //理事会成员、监视情况信息
import Tab051 from './checkItem/tab051.vue' //办事机构情况
import Tab061 from './checkItem/tab061.vue' //内部建设情况
import Tab071 from './checkItem/tab071.vue' //接受监督检查情况
import Tab081 from './checkItem/tab081.vue' //开展公益活动情况
import Tab091 from './checkItem/tab091.vue' //承接政府委托职能、购买服务项目、政府补贴情况
import Tab0101 from './checkItem/tab0101.vue' //国际合作情况
import Tab0111 from './checkItem/tab0111.vue' //对外交流、国际组织
import Tab0121 from './checkItem/tab0121.vue' //对外活动建议
import Tab0131 from './checkItem/tab0131.vue' //举办刊物及公益活动
import Tab0141 from './checkItem/tab0141.vue' //援藏援疆及乡村振兴活动,
import Tab0151 from './checkItem/tab0151.vue' //参与成渝经济圈建设情况
import Tab0161 from './checkItem/tab0161.vue' //年度工作报告
import Tab0171 from './checkItem/tab0171.vue' //年检审核意见

import Tab0181 from './checkItem/tab0181.vue' //现金流量表
import Tab0191 from './checkItem/tab0191.vue' //接受捐赠资助及使用
import Tab0201 from './checkItem/tab0201.vue' //
import Tab0211 from './checkItem/tab0211.vue' //参与成渝经济圈建设情况
import Tab0221 from './checkItem/tab0221.vue' //公益慈善活动支出
import Tab0231 from './checkItem/tab0231.vue' //党建情况
import Tab0241 from './checkItem/tab0241.vue' //上年度整改情况表
import Tab0251 from './checkItem/tab0251.vue' //附件材料

import { ElMessage, ElMessageBox } from 'element-plus'


const { closeAllPop } = inject('closeAllPop')

const props = defineProps({
  currentRow: {
    type: Object,
    default: {}
  }
})


const emit = defineEmits(['openResult'])
const activeStep = ref(0)
const textValue = ref('')
const orgName = ref('')
const detailInfo = ref({})
const checkForm = reactive({
  proofreadStatus: '1',
  id: props.currentRow.id
})
const isLoad = ref(false)
const saveLoad = ref(false)
const dialogSubmitVisible = ref(false) //提交校对



orgName.value = props.currentRow.organizationBaseName
const changeStep = (step) => {
  if (textValue.value) {
    saveNote().then(() => {
      activeStep.value =
        step === 'prev'
          ? activeStep.value == 0
            ? 0
            : --activeStep.value
          : activeStep.value == 19
            ? 19
            : ++activeStep.value
    })
  } else {
    activeStep.value =
      step === 'prev'
        ? activeStep.value == 0
          ? 0
          : --activeStep.value
        : activeStep.value == 25
          ? 25
          : ++activeStep.value
  }
}

const getDetailInfo = () => {
  const { creditCode, examineYear, id, organizationType } = props.currentRow
  return new Promise((resolve, reject) => {
    APTMethods.getMFInfoByPage({
      // creditCode: pr2,
      // examineYear: pr8,
      // organizationBaseId: 0, //基础库
      organizationType,
      id,
      pageNumberMark: activeStep.value - 0 //页码
    }).then((res) => {
      textValue.value = res.annotations && res.annotations.description //批注
      resolve(res)
    })
  })
}

// 提供方法给子组件
provide('getDetailInfo', { getDetailInfo });

const backStep = (index) => {
  console.log(index)
  activeStep.value = index
}

//保存批注
const saveNote = () => {
  return new Promise<void>((resolve, reject) => {
    if (textValue.value) {
      APTMethods.saveTips({
        description: textValue.value,
        id: props.currentRow.id,
        pageNumberMark: activeStep.value - 0,
      }).then(() => {
        ElMessage({
          type: 'success',
          message: '批注保存成功'
        })
        resolve()
      })
    } else {
      ElMessage({
        type: 'error',
        message: '请输入批注'
      })
    }
  })
}
//提交校对
const submitJdForm = () => {
  saveLoad.value = true
  return new Promise<void>((resolve, reject) => {
    APTMethods.saveJd({ ...checkForm }).then(() => {
      ElMessage({
        type: 'success',
        message: '提交成功，请刷新页面查看最新数据。'
      })
      saveLoad.value = false
      toClose()
      closeAllPop()
      resolve()
    }).catch(error => {
      saveLoad.value = false
    })
  })
}

//切换查询批注
// const searchNote = () => {
//   setTimeout(() => {
//     textValue.value = '123131'
//   }, 1000)
// }
const detailTip = () => {
  emit('openResult')
}
const toClose = () => {
  dialogSubmitVisible.value = false;
}
const toSubmit = () => {
  dialogSubmitVisible.value = true
  // ElMessageBox.confirm('您确定要提交吗?', '提示', {
  //   confirmButtonText: '确定',
  //   cancelButtonText: '取消',
  //   type: 'warning'
  // })
  //   .then(() => {
  //     isLoad.value = true
  //     setTimeout(() => {
  //       ElMessage({
  //         type: 'success',
  //         message: '提交成功，请刷新页面查看最新数据。'
  //       })
  //       isLoad.value = false
  //       closeAllPop()
  //     }, 2000)
  //   })
  //   .catch(() => { })
}
</script>
<style>
::v-deep .el-dialog {
  margin-bottom: 0;
}

::v-deep .el-dialog__body {
  padding-top: 0 !important;
}

table.m-table {
  border-spacing: 0px;
  width: 100%;
  border-top: 1px solid #999;
  border-left: 1px solid #999;
  color: #000;

  thead {
    background: #f0f7fc;
    color: rgb(37, 43, 53);

    th {
      border-right: 1px solid #999;
      border-bottom: 1px solid #999;
      text-align: center;
      height: 32px;
    }
  }



  td {
    height: 32px;
    border-right: 1px solid #999;
    border-bottom: 1px solid #999;
    text-align: center;

    &.td-head {
      background: #f0f7fc;
    }
  }
}
</style>
<style lang="scss" scoped>
//隐藏滚轮
::v-deep .el-switch.is-disabled {
  opacity: 1;
}

::v-deep .el-descriptions__title {
  margin-top: 15px;
}

.check-con {
  width: 100%;
  height: 600px;
  // padding: 0 50px;
  overflow: auto;
  box-sizing: border-box;
  display: flex;

  ::-webkit-scrollbar {
    width: 0;
  }

  //将宽度设为0，滚动条就会隐藏。
  ::-webkit-scrollbar {
    display: none;
  }

  .left-tree {
    width: 280px;
    padding: 20px;
    padding-left: 10px;
    padding-right: 10px;
    margin-right: 10px;
    font-size: 12px;
    box-sizing: border-box;
    height: 600px;
    overflow: auto;
    border: 1px solid #eee;
  }

  .right-content {
    flex: 1;
    height: 600px;
    overflow: auto;
    padding-bottom: 10px;
    box-sizing: border-box;
  }

  .check-info {
    flex: 1;
    padding-right: 20px;
    color: #000;

    >div {
      transition: all 0.5s ease-in-out;
    }
  }

  .note-box {
    margin-top: 30px;
  }
}

.msg-tip {
  padding: 20px 0;
  color: #000;

  font-family: '微软雅黑';
}
</style>
